<template>
  <div>
    <div class="demo-input-size">
      <el-input v-model="con" placeholder="按内容查询" :suffix-icon="Search" />
    </div>
    <div class="look">
      <el-button @click="qurryByCon()">查询</el-button>
    </div>

    <el-table :data="orders" stripe style="width: 100%">
      <el-table-column prop="oid" label="ID" width="100" />
      <el-table-column prop="content" label="内容" width="400" />
      <el-table-column prop="state" label="状态" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.state == 1">未接单</span>
          <span v-if="scope.row.state == 2">进行中</span>
          <span v-if="scope.row.state == 3">待评价</span>
          <span v-if="scope.row.state == 4">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="other" label="备注" width="400" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" text @click="handleUpdate(scope.row)"
            >详情
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除
          </el-button>
          <el-button size="small" type="primary" @click="handleCom(scope.row)"
            >评价
          </el-button>

        </template>
      </el-table-column>
    </el-table>

          <el-dialog v-model="Dialog" title="评论订单" width="30%" center >
            <el-form :model="addConment">
              <el-input
                v-model="addConment.conment"
                :rows="3"
                type="textarea"
                placeholder=" 善语结善缘,恶语伤人心"
              />
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="handleAddCom()">提交</el-button>
                <el-button  @click="Dialog = false"
                  >取消</el-button
                >
              </span>
            </template>
          </el-dialog>


    <el-dialog
      v-model="dialogFormVisible4Edit"
      title="订单详情"
      width="45%"
      align-center
    >
      <el-form :model="formData" label-width="120px">
        <el-form-item label="订单ID:">
          {{ formData.oid }}
        </el-form-item>
        <el-form-item label="跑腿员:">
          {{ formData.workerName }}
        </el-form-item>
        <el-form-item label="状态:">
          <span v-if="formData.state == 1">未接单</span>
          <span v-if="formData.state == 2">进行中</span>
          <span v-if="formData.state == 3">待评价</span>
          <span v-if="formData.state == 4">已完成</span>
        </el-form-item>
        <el-form-item label="起始地址:">
          {{ formData.slocation }}
        </el-form-item>
        <el-form-item label="送达地址:">
          {{ formData.elocation }}
        </el-form-item>
          <el-form-item label="下单时间:">
            {{formData.time}}
          </el-form-item>
      </el-form>
      <div class="ff">
        <el-button type="primary" @click="dialogFormVisible4Edit = false"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <div class="footer">
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total,prev,pager,next,jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getApi, deleteApi, postApi, updateApi } from "@/util/api";

const textarea = ref("");
</script>

<script>
export default {
  data() {
    return {
      orders: [],
      pagination: {
        currentPage: 1, //当前页码
        pageSize: 10, //一页多少条
        total: 0,
      },

      con: "",
      addConment: {
        conment: "",
      },

      Dialog: false,
      dialogFormVisible4Edit: false,
      formData: {},
      data:{},
    };
  },
  created() {
    this.getAll();
  },

  methods: {
    getAll() {
      //分页,发送异步数据
      getApi(
        "users/orders/" +
          this.pagination.currentPage +
          "/" +
          this.pagination.pageSize +
          "?state=3"
      )
        .then((rs) => {
          this.pagination.pageSize = rs.data.data.size;
          this.pagination.currentPage = rs.data.data.current;
          this.pagination.total = rs.data.data.total;
          this.orders = rs.data.data.records;
        })
        .catch((error) => {
          alert(error);
        });
    },
    handleCurrentChange(currentPage) {
      //修改页码值为当前选中页码值
      this.pagination.currentPage = currentPage;
      //执行查询
      this.getAll();
    },

    //删除
    handleDelete(row) {
      //console.log(row);
      this.$confirm("此操作永久删除当前信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          deleteApi("users/orders/" + row.oid)
            .then((rs) => {
              if (rs.data.code == 1) {
                this.$message.success("删除成功");
              } else {
                this.$message.error("删除失败");
              }
            })
            .finally(() => {
              this.getAll();
            });
        })
        .catch(() => {
          this.$message.info("取消操作");
        });
    },

    //查询
    qurryByCon() {
      getApi(
        "users/orders/" +
          this.pagination.currentPage +
          "/" +
          this.pagination.pageSize +
          "?state=3" +
          "&con=" +
          this.con
      )
        .then((rs) => {
          this.pagination.pageSize = rs.data.data.size;
          this.pagination.currentPage = rs.data.data.current;
          this.pagination.total = rs.data.data.total;
          this.orders = rs.data.data.records;
        })
        .catch((error) => {
          alert(error);
        });
    },

    //详情
    handleUpdate(row) {
      getApi("users/orders/" + row.oid)
        .then((res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
            this.dialogFormVisible4Edit = true;
          } else {
            this.$message.error("数据同步失败，自动刷新");
          }
        })
        .finally(() => {
          this.getAll();
        });
    },

    //评价
    handleAddCom() {
      postApi("users/orders/conments/"+this.data.oid,{
        content: this.addConment.conment,
      })
        .then((rs) => {
          //判断当前操作是否成功
          if (rs.data.code == 1) {
            //1、关闭弹层
            this.Dialog = false;
            this.$message.success("评价成功！");
          } else if (rs.data.code == -1) {
            this.$message.error("业务逻辑出现错误，请联系管理员处理！");
          }
        })
        .finally(() => {
          //2、刷新数据
          this.getAll();
          this.addConment={}
        });
    },
    handleCom(row){
      this.Dialog=true
      this.data=row
      console.log(this.data)
    }
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.is-background {
  margin-top: 10px;
}
.demo-input-size {
  display: inline-block;
  vertical-align: middle;
}
.look {
  display: inline-block;
  font-weight: bolder;
  margin-left: 10px;
}
.newbu {
  display: inline-block;
  font-weight: bolder;
  margin-left: 10px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
}
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
.foot {
  text-align: center;
  margin-top: 15px;
}
</style>